<!-- 人工巡检 -->
<template>
	<div>
		<el-row>
			<el-form :inline="true" :model="data.queryParams">
				<orgSelect @do-search="mergeSearchData" />
				<el-form-item label="设备">
					<el-input v-model="data.queryParams.deviceCode" placeholder="设备编号" clearable style="width: 150px" />
				</el-form-item>

				<el-form-item label="资产">
					<el-input v-model="data.queryParams.voltageCode" placeholder="资产编号" clearable style="width: 120px" size="default" />
				</el-form-item>
				<el-form-item label="" style="margin-bottom: 0 !important">
					<el-button type="primary" @click="search" size="default"> 查询 </el-button>
				</el-form-item>
			</el-form>

			<div class="flex1"></div>

			<el-space style="padding: 0">
				<el-radio-group size="default" v-model="data.rowNum" @change="screenNumberChange">
					<el-radio-button :label="1">
						<svg-icon class-name="screen1" icon-class="screen1" />
						1屏
					</el-radio-button>
					<el-radio-button :label="2">
						<svg-icon class-name="screen1" icon-class="screen4" />
						4屏
					</el-radio-button>
					<!-- <el-radio-button :label="3">
						<svg-icon class-name="screen1" icon-class="screen9" />
						9屏
					</el-radio-button> -->
				</el-radio-group>

				<el-radio-group size="default" v-model="data.viewType" @change="viewChange">
					<el-radio-button :label="1">
						<svg-icon class-name="photo" icon-class="photo" />
						图片
					</el-radio-button>
					<el-radio-button :label="2">
						<svg-icon class-name="video" icon-class="video" />
						视频
					</el-radio-button>
				</el-radio-group>

				<el-button size="default" @click="fullView" type="success"> 全屏预览 </el-button>
			</el-space>
		</el-row>

		<!-- main -->
		<div class="main">
			<!-- 设备列表 -->
			<el-card shadow="hover" class="deviceList">
				<template #header>
					<div class="card-header">
						<span>设备列表</span>
					</div>
				</template>

				<el-scrollbar class="list">
					<div
						v-for="item in data.deviceList.list"
						:key="item.deviceCode"
						class="item"
						:class="{
							on: data.selectIds.includes(item.deviceCode),
							isOff: item.offLine,
						}"
						@click="setSelectDevice(item)"
					>
						<div>{{ getAddress(item) }}</div>

						<div class="sw2">
							{{ item.deviceAddress }}
						</div>
					</div>
				</el-scrollbar>
			</el-card>

			<!-- 视图列表 -->
			<div class="viewList el-card" :class="{ fullView: data.isFullView }" ref="viewList">
				<!-- 图片 -->
				<template v-if="data.viewType === 1">
					<div class="viewBox" :style="`grid-template-columns: repeat(${data.rowNum}, 1fr); grid-template-rows: repeat(${data.rowNum}, 1fr)`">
						<div v-for="item in data.screenNumber" class="viewItemBg" :key="item">
							<el-icon :size="imgSize"><Picture /></el-icon>
						</div>
					</div>

					<div
						class="viewBox viewBoxView"
						:style="`grid-template-columns: repeat(${data.rowNum}, 1fr); grid-template-rows: repeat(${data.rowNum}, 1fr)`"
					>
						<div v-for="item in data.selectDevice" class="viewItem" :key="item.deviceCode">
							<ViewImage @close-img="removeCurDevice" :row-data="item" />
						</div>
					</div>
				</template>

				<!-- 视频-->
				<template v-if="data.viewType === 2">
					<div class="viewBox" :style="`grid-template-columns: repeat(${data.rowNum}, 1fr); grid-template-rows: repeat(${data.rowNum}, 1fr)`">
						<div v-for="item in data.screenNumber" class="viewItemBg" :key="item">
							<el-icon :size="imgSize"><VideoCamera /></el-icon>
						</div>
					</div>

					<div
						class="viewBox viewBoxView"
						:style="`grid-template-columns: repeat(${data.rowNum}, 1fr); grid-template-rows: repeat(${data.rowNum}, 1fr)`"
					>
						<div v-for="item in data.selectDevice" class="viewItem" :key="item.deviceCode">
							<ViewVideo @close-video="removeCurDevice" :row-data="item" />
						</div>
					</div>
				</template>

				<!-- close -->
				<el-icon v-if="data.isFullView" class="close" size="60" @click="data.isFullView = false"><CircleClose /></el-icon>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup name="doCheck">
import { reactive, onMounted, ref, watch, onBeforeUnmount, nextTick, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import ViewImage from './ViewImage.vue';
import ViewVideo from './ViewVideo.vue';
import { smokeStore } from '/@/stores/smoke';
import deviceApi from '/@/api/smoke/device';
import { Picture, VideoCamera, CircleClose } from '@element-plus/icons-vue';
import orgSelect from '/@/components/smoke/orgSelect/index.vue';
import { useSmoke } from '/@/hook/index';
const { getFileUrl, getAddress, isOffline } = useSmoke();

const viewList = ref();

const data = reactive({
	queryParams: {
		communityId: '', // 小区ID
		buildNum: '', // 小区栋数
		utilNum: '', // 小区单元
		deviceCode: '', // 设备ID
		voltageCode: '', //电表箱编号
		auditStatus: 2, // 审核状态
		pageNum: 1,
		pageSize: 15,
	},

	deviceList: <any>[], // left list

	viewType: 1, // 1:图片 2：视频
	screenNumber: <number>4,
	rowNum: 2,

	selectDevice: <any>[],
	selectIds: <any>[],

	isFullView: false,
});

// 获取全局组件大小
const imgSize = computed(() => {
	let size = 120;
	switch (data.screenNumber) {
		case 1:
			size = 200;
			break;
		case 4:
			size = 140;
			break;
		case 9:
			size = 90;
			break;
		default:
			120;
	}

	return size;
});

watch(
	() => data.selectDevice,
	(newValue: Array<any>, preValue: Array<any>) => {
		let curSelectIds = newValue.map((item: any) => item.deviceCode);
		data.selectIds = curSelectIds;
	},
	{
		deep: true,
	}
);

onMounted(() => {
	window.addEventListener('keydown', escPress);
	fetch();
});

onBeforeUnmount(() => {
	window.removeEventListener('keydown', escPress);
	smokeStore().clearImgs();
});

function mergeSearchData(xqData: any) {
	const { ids, dept, communityId, buildNum, utilNum, communityIds } = xqData;
	Object.assign(data.queryParams, { ids, communityId, buildNum, utilNum, communityIds });
	search();
}

//搜索
function search() {
	data.selectDevice = [];
	fetch();
}

// 获取列表页数据
function fetch(params?: any) {
	Object.assign(data.queryParams, params);
	deviceApi.getDeviceList(data.queryParams).then((res) => {
		res.data.list.forEach((item: any) => {
			item.offLine = isOffline(item.lastUploadTime);
		});
		data.deviceList = res.data;
	});
}

// 点击设备列表的设备
function setSelectDevice(item: any) {
	//如果已经选择了
	if (data.selectIds.includes(item.deviceCode)) {
		removeCurDevice(item.deviceCode);
		return;
	}

	// 小于分屏数，添加
	if (data.selectDevice.length >= data.screenNumber) {
		ElMessage.warning('选择大于分屏数了');
		return;
	} else {
		data.selectDevice.push(item);
	}
}

// 移除设备
function removeCurDevice(deviceCode: string) {
	data.selectDevice = data.selectDevice.filter((item: any) => {
		return item.deviceCode != deviceCode;
	});
}

// 分屏变化
function screenNumberChange(value: any) {
	data.screenNumber = value * value;
	if (data.selectDevice.length > data.screenNumber) {
		data.selectDevice = data.selectDevice.slice(0, value * value);
	}
}

// 全屏预览
function fullView() {
	data.isFullView = true;
	ElMessage({
		message: '按【ESC】键退出全屏！',
		type: 'warning',
	});
}

// esc按下 取消全屏显示
function escPress(e: any) {
	if (e.keyCode == 27) {
		data.isFullView = false;
	}
}

// 视图变化（图片|视频）
function viewChange(value: any) {
	// 图片模式
	if (value == 1) {
		// 如果当前选择的设备不为空，那么这些设备要断流
	}
	// 视频模式
	if (value == 2) {
		//
	}
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
	margin-bottom: 0;
}
:deep(.el-form--inline .el-form-item) {
	margin-right: 10px;
}
.main {
	display: flex;
	justify-content: space-between;
	border-radius: 3px;
	height: calc(100vh - 170px);
	margin-top: 10px;
	// background-color: #504f4f;
}
.deviceList {
	height: 100%;
	box-sizing: border-box;
	width: 240px;
	margin-right: 10px;
	display: grid;

	:deep(.el-card__body) {
		padding: 0;
	}

	.list {
		padding: 10px;
		box-sizing: border-box;
		height: calc(100vh - 220px);
		.item {
			padding: 10px;
			font-size: 12px;
			border-radius: 3px;
			margin-bottom: 5px;
			user-select: none; /*用户是否能够选中文本*/
			border-left: 2px solid #67c23a;
			background-color: var(--el-color-primary-light-9);

			&.on {
				background: var(--next-bg-main-color);
				border-left: none;
				border-right: 2px solid #67c23a;
			}
		}
	}
}
.viewList {
	flex: 1;
	box-sizing: border-box;
	position: relative;

	.viewBox {
		box-sizing: border-box;
		height: 100%;
		display: grid;
		gap: 10px;
		padding: 10px;
		overflow: hidden;
	}

	.viewBoxView {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
	}

	.viewItemBg {
		box-sizing: border-box;
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: 20%;
		background-color: var(--next-bg-main-color);
		position: relative;

		i {
			font-size: 80px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: (translate(-50%, -50%));
			// color: var(--el-color-primary-light-9);
			color: #dedfe0;
		}
	}

	.viewItem {
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
		position: relative;
	}
}
.fullView {
	position: fixed;
	height: 100vh;
	width: 100vw;
	left: 0;
	top: 0;
	z-index: 10012525;

	.close {
		position: absolute;
		right: 20px;
		top: 20px;
	}
}
.isOff {
	border-color: #e6a23c !important;
}
</style>
